<!DOCTYPE html>
<html>
	<head>  
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<script src="js/jquery-2.2.1.min.js"></script>
		<title>播放页 </title>
	</head>
	<body>
		<!--背景模糊-->  
		<div class="blur" /></div>
		<!--蒙版-->
		<div id="Mask"></div>
		<!--头部-->
		<header>
			<ul>
				<li><i class="fa fa-heart-o"></i>我喜欢</li>
				<li><i class="fa fa-plus-square-o"></i>添加到</li>
				<li id="header_delete"><i class="fa fa-trash-o"></i>删除</li>
				<li id="header_empty"><i class="fa fa-send-o"></i>清空列表</li>
			</ul>
		</header>
		<!--内容部分-->
		<article>
			<!--列表-->
			<div class="Text_left">
				<!--title-->
				<div class="left_title">
					<div class="left_song">歌曲</div>
					<div class="left_singer">歌手</div>
					<div class="left_time">时长</div>
				</div>
				<!--列表内容-->
				<div id="menu" class="menu" >
					<ul id="menu_ul" class="menu_ul">
						<!--<li><div class="circle"></div><span>在他乡</span><span>水木年华</span><span>04:30</span><div class="menu_animation"><em class="anim_1"></em><em class="anim_2"></em><em class="anim_3"></em></div></li>-->
					</ul>
					<!--滚动条-->
					<div id="scroll_bar" class="scroll_bar">
						<!--滑块-->
						<div id="bar" class="bar"></div>
					</div>
				</div>
			</div>
			<!--歌词海报-->
			<div class="Text_right">
				<!--歌词头像-->
				<div class="right_frame"><img src="img/123.gif" /></div>
				<!--歌词部分-->
				<div class="box_Lyric">
					<ul id="Lyric" class="Lyric">
						<!--<li>喵喵喵喵喵喵喵喵喵喵喵喵</li>-->
					</ul> 
				</div>
			</div> 
		</article>
		<!--底部功能栏-->
		<footer>
			<!--播放暂停-->
			<div class="footer_left">
				<i id="footer_last" class="fa fa-backward"></i>
				<i id="plays" class="fa fa-pause"></i><!--fa-pause-->
				<i id="footer_next" class="fa fa-forward"></i>
				<!--播放器-->
				<audio id="musicplay" preload="auto"></audio>
			</div>
			<!--时间进度条-->
			<div class="footer_center">
				<ul class="center_ul">
					<!--歌曲信息-->
					<li class="ul_information"><span class="information_name">在他乡-水木年华</span><span class="information_time">00:00/00:00</span></li>
					<!--进度条-->
					<li class="ul_Progress">
						<div class="li_slider"></div>
						<div class="li_Percentage"><i class="spot"></i></div>
					</li>
				</ul>
			</div>
			<!--循环音量功能按钮-->
			<div class="footer_right" >
				<!--播放方式-->
				<i id="footer_pattern" class="fa fa-retweet"></i> <!--random-->
				<!--音量-->
				<i id="footer_volume" class="fa fa-volume-up"></i><!--volume-off volume-down-->
				<!--音量条-->
				<div class="volume_box">
					<div class="volume_slider"></div>
				</div>
			</div>
		</footer>
		<script src="js/index.js"></script>
		<script src="js/scroll.js"></script>
		<script src="js/data.js"></script>
		<script src="js/logindata.js"></script>
	</body>
</html>